Home > Article > Web Front-end > Implement the Snake game using 63 lines of HTML5 code

Implement the Snake game using 63 lines of HTML5 code

不言Original: 2018-06-11 14:21:352672browse

This article mainly introduces the implementation of the Snake game using 63 lines of HTML5 code. It has a certain reference value. Now I share it with you. Friends in need can refer to it

Snake, The most important function points:

1. Movement of the snake

2. Change the direction of the snake

3. Place food

4. Increase sacrifice

5. How to hang up?

The specific implementation is as follows. It is simple and practical in 60 lines. Friends who are interested can refer to it. I hope it will be helpful to everyone. I rarely paid much attention to html5 before, but I feel that choosing html has gradually become a trend, and I would like to know more about it. I found a game to learn from. After writing this game, I feel that HTML5 and JS are closely integrated, even if JS is not particularly good. I guess I need to learn js first. This is just a personal suggestion and may not be accurate. Another thing is that your thinking and logic must be very clear, otherwise writing games may be painful.

This is my first time writing a game and my first time writing html5. It still feels very difficult. Once I’ve finished writing it, I’ll share it with you. Communicate with each other.............If you don’t understand or have suggestions, you can leave me a message. . . The code is very short, only 60 lines.
But this is a semi-finished product, waiting to be completed. Update the

code as follows:

<!DOCTYPE HTML> 
<html> 
<body> 
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;"></canvas> 
<script type="text/javascript"> 
var c=document.getElementById("myCanvas"); 
var time = 160 ; //蛇的速度 
var cxt=c.getContext("2d"); 
var x = y = 8; 
var a = 0; //食物坐标 
var t = 20; //舍身长 
var map = []; //记录蛇运行路径 
var size = 8; //蛇身单元大小 
var direction = 2; // 1 向上 2 向右 0 左 3下 
interval = window.setInterval(set_game_speed, time); // 移动蛇 
function set_game_speed(){ // 移动蛇 
switch(direction){ 
case 1:y = y-size;break; 
case 2:x = x+size;break; 
case 0:x = x-size;break; 
case 3:y = y+size;break; 
} 
if(x>400 || y>400 || x<0 || y<0){ 
alert("你挂了，继续努力吧!失败原因：碰壁了.....");window.location.reload(); 
} 
for(var i=0;i<map.length;i++){ 
if( parseInt(map[i].x)==x && parseInt(map[i].y)==y){ 
alert("你挂了，继续努力吧！失败原因：撞到自己了.....");window.location.reload(); 
} 
} 
if (map.length>t) { //保持舍身长度 
var cl = map.shift(); //删除数组第一项，并且返回原元素 
cxt.clearRect(cl[&#39;x&#39;], cl[&#39;y&#39;], size, size); 
}; 
map.push({&#39;x&#39;:x,&#39;y&#39;:y}); //将数据添加到原数组尾部 
cxt.fillStyle = "#006699";//内部填充颜色 
cxt.strokeStyle = "#006699";//边框颜色 
cxt.fillRect(x, y, size, size);//绘制矩形 
if((a*8)==x && (a*8)==y){ //吃食物 
rand_frog();t++; 
} 
} 
document.onkeydown = function(e) { //改变蛇方向 
var code = e.keyCode - 37; 
switch(code){ 
case 1 : direction = 1;break;//上 
case 2 : direction = 2;break;//右 
case 3 : direction = 3;break;//下 
case 0 : direction = 0;break;//左 
} 
} 
// 随机放置食物 
function rand_frog(){ 
a = Math.ceil(Math.random()*50); 
cxt.fillStyle = "#000000";//内部填充颜色 
cxt.strokeStyle = "#000000";//边框颜色 
cxt.fillRect(a*8, a*8, 8, 8);//绘制矩形 
} 
// 随机放置食物 
rand_frog(); 
</script> 
</body> 
</html>

The above is the entire content of this article, I hope it will be helpful to everyone’s study, more related Please pay attention to the PHP Chinese website for content!

Related recommendations:

HTML5 and jQuery implement search intelligent matching function

##HTML5 implementation How to use buttons to control background music switch

The above is the detailed content of Implement the Snake game using 63 lines of HTML5 code. For more information, please follow other related articles on the PHP Chinese website!

php html5 jquery html JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to HTML5 history APINext article：Introduction to HTML5 history API

See more

Implement the Snake game using 63 lines of HTML5 code

Related articles