0
これは私のコードソースです。すべてのものはビデオで彼のために正常に動作します（リンクを参照）が、私のためではありません。私のコードは完璧ですが、なぜ私は問題を発見したのですか？
HTML
<html>
<head>
<title>HTML5 | SNAKE GAME</title>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div id="overlay">
Your Final Score : <span id="final_score"></span>
<br />
<a onclick="window.location.reload()" href="#">Click to play again</a>
<!--End Of overlay-->
</div>
<canvas id="myCanvas">
<p>Sorry, your browser dosn't support Canvas</p>
</canvas>
<div id="stats">
<div class="score"></div>
<div class="high_score"></div>
<button id="reset_score" onclick="resetScore()">Rest score</button>
<!--state-->
</div>
<!--End of container-->
</div>
<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!--My JS-->
<script type="text/javascript"></script>
</body>
</html>
私はここで推測するCSS
body{
background: black url(snack.jpg) no-repeat top center;
font-family: arial;
}
a{
color : currentColor;
text-decoration: none;
}
#myCanvas{
width : 600px ;
height : 400px;
border: 1px solid limegreen;
background: rgba(100,50,100,0.5);
}
.container{
margin : 30px auto 0 auto;
width : 610px;
overflow : auto;
position : relative;
}
#stats{
width:590px;
background: #cfa;
padding : 5px;
font-size : 20px;
font-weight: bold;
margin-bottom : 5px;
overflow: auto;
background: rgba(255,255,255,0.5);
}
.score{
width : 25%;
height : 50px;
padding-top: 20px;
float :left;
margin-right: 5px;
overflow: auto;
background : white;
text-align: center;
}
#reset_score{
padding : 10px;
float : right;
background: rgba(255,255,255,1);
}
#overlay{
display : none;
color : limegreen;
font-size: 25px;
text-align:center;
position : absolute;
top : 170px;
left : 180px;
opacity: 1;
}
#overlay a{
display :block;
margin-top: 10px;
background: #fff;
padding : 15px;
}
#overlay a:hover{
background: #eee;
color: darkgreen;
-webkit-transition: background 17s;
transition : background 17s;
transition : color 17s;
}
はどこです私は、問題
JS
$(document).ready(function() {
//Intialize variables
var canvas, ctx, w, h, d, food, score, speed, /*body of snake*/ snake_array, color;
//End of intialize var
//full
/*take the first cnvas element*/
canvas = $("#myCanvas")[0];
/*2D*/
ctx = canvas.getContext("2d");
w = canvas.width();
h = canvas.height();
cw = 15; /*size snake rect*/
speed = 180;
d = "right";
color = "green";
//End of variables
//functions
function init() {
create_snake();
create_food();
score = 0;
if (typeof game_loop != "undefined") {
clearInterval(game_loop);
}
game_loop = setInterval(paint, speed);
//End of fnction init()
}
//End of functions
//Code
init();
//End of Code
function create_snake() {
//length of the snake
var length = 5;
snake_array = [];
/*mod*/
for (var i = length - 1; i >= 0; i--) {
//push one square in body of snake
snake_array.push({
x: i,
y: 0
});
//End of loop
}
//End of snacke func
}
function create_food() {
food = {
//random food in the screen
x: Math.round(Math.random() * (w - cw)/cw),
y: Math.round(Math.random() * (h - cw)/cw)
//End of food object
};
//End of creat_food func
}
//drawing the snake
function paint() {
//paint canvas
ctx.fillStyle = "black";
ctx.fillRect(0, 0, w, h);
//border of canvas
ctx.strockeStyle = "white";
ctx.strockeRect(0, 0, w, h);
//movement snack
//draw snack
var nx = snake_array[0].x;
var ny = snake_array[0].y;
//direction of snack
if (d == 'right') {
nx++;
} else if (d == 'left') {
nx--;
} else if (d == 'up') {
ny--;
} else if (d == 'down') {
ny++;
}
//Collide code when loosing
if (nx == -1 || ny == -1 || nx == w/cw || ny == h/cw || check_collision(nx, ny, snake_array)) {
init();
return;
}
//Snake eat food
var tail;
if (nx == food.x && ny == food.y) {
tail = {
x: nx,
y: ny
};
score++;
//create new random food
create_food();
} else {
//remove square from the body of snake
tail = snake_array.pop();
tail.x = nx;
tail.y = ny;
}
//add a new square to the body of the snake
snake_array.unshift(tail);
for (var i = 0; i < snake_array.length; i++) {
var c = snake_array[i];
paint_cell(c.x, c.y);
//End for
}
//Paint cell
paint_cell(food.x, food.y);
//check score and show if score more than high score wil replace him
checkscore(score);
//End of paint func
}
function paint_cell(x, y) {
ctx.fillStyle = color;
ctx.fillRect(x * cw, y * cw, cw, cw);
ctx.strockeStyle = "white";
ctx.strockeRect(x * cw, y * cw, cw, cw);
//End of paint_cell func
}
function check_collision(x, y, array) {
for (var i = 0; i < array.length; i++) {
if (array[i.x == x && array[i].y == y]) {
/*if(array[i].x == x && array[i].y == y){}*/
return true;
}
//End of for loop
}
return false;
//End of check collision func
}
//End of document
});
何が問題なのですか、何をしようとしていますか？ –
コードをできるだけ小さくするようにしてください。また、「私のコードは完璧です」という言葉は、決して真実ではありません。 – evolutionxbox