63 行の HTML5 コードを使用してスネークゲームを実装する-H5 チュートリアル-php.cn

63 行の HTML5 コードを使用してスネークゲームを実装する

不言

リリース： 2018-06-11 14:21:35

オリジナル

2717 人が閲覧しました

この記事では、主に 63 行の HTML5 コードを使用した Snake ゲームの実装を紹介します。これには、必要な友人が参照できるように共有します。

Snake、主な機能のポイント: 1. ヘビの動き

2. ヘビの向きを変える

4. 犠牲を増やす

5. 具体的な実装方法は以下の通りです。 60 行で実践的な内容となっておりますので、ご興味がございましたらぜひご参照ください。以前は html5 についてあまり注目したことがありませんでしたが、徐々に html を選択することがトレンドになってきたように感じており、もっと知りたいと思っています。このゲームを書いた後、JS は特に優れているわけではありませんが、HTML5 と JS は非常に密接に統合されていると感じました。最初に js を学ぶ必要があると思います。これは単なる個人的な提案であり、正確ではないかもしれません。もう 1 つは、思考とロジックが非常に明確でなければならないということです。そうしないと、ゲームを書くのが非常に苦痛になる可能性があります。

ゲームを書くのは初めてで、HTML5 を書くのも初めてですが、まだとても難しいと感じています。書き終わったら、皆さんにもシェアさせていただきます。お互いにコミュニケーションを取りましょう.....わからないことや提案がある場合は、メッセージを残してください。。。コードは非常に短く、わずか 60 行です。

しかし、これは進行中の作業であり、完成を待っています。もう一度更新します

コードは次のとおりです:

<!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>

ログイン後にコピー

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語に注目してください。 Webサイト！