//直接上代碼啦
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 貪喫蛇 </title>
<script></script>
<style>
#div{
width:300px;height:300px;background:lightgray;margin:0 auto;
position:relative;
}
.game{
width:100px;height:50px;background:gray;border:1px solid #ddd;
border-radius:5px;line-height:50px;text-align:center;color:lightblue;
font-weight:bold;position:absolute;top:120px;left:100px;display:none;
cursor:pointer;
}
</style>
</head>
<body>
<div id =div>
<canvas id="canvas" width="300px" height="300px"></canvas>
<div id="start" class="game" onclick="run()">開始遊戲</div>
<div id="over" class="game">GAME OVER</div>
</div>
</body>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle="gray";
var start = document.getElementById("start");
var over = document.getElementById("over");
var state = 0;
var direction = "right";
const WIDTH = canvas.width;
const HEIGHT = canvas.height;
const FW = 10;
//遊戲開始
function paint_start(){
if(state==0){
start.style.display="block";
}
}
function run(){
state=1;
start.style.display="none";
}
//遊戲結束
function paint_over(){
if(state==2){
over.style.display="block";
}
}
//遊戲運行
var snake=[];
snake[0] = {
x:Math.floor(Math.random()*(WIDTH/10-1))*10,
y:Math.floor(Math.random()*(HEIGHT/10-1))*10
}
snake[1]={
x:snake[0].x-FW,
y:snake[0].y
}
snake[2]={
x:snake[1].x-FW,
y:snake[1].y
}
function sNake(){
this.x = snake[snake.length-1].x;
this.y = snake[snake.length-1].y;
}
function paint(snake){
for (var i=0;i<snake.length ;i++ ){
context.fillRect(snake[i].x,snake[i].y,FW,FW);
}
}
function clear(){
context.clearRect(0,0,400,400);
}
function step(snake){
if(state==1){
if(direction=="left"){
snake[snake.length-1].x=snake[0].x-10;
snake[snake.length-1].y=snake[0].y;
}else if(direction=="right"){
snake[snake.length-1].x=snake[0].x+10;
snake[snake.length-1].y=snake[0].y;
}else if(direction=="up"){
snake[snake.length-1].y=snake[0].y-10;
snake[snake.length-1].x=snake[0].x;
}else{
snake[snake.length-1].y=snake[0].y+10;
snake[snake.length-1].x=snake[0].x;
}
snake.unshift(snake[snake.length-1]);
snake.pop();
}
}
function eat(){
if(checkEat(snake[0])){
snake[snake.length] = new sNake();
return true;
}else{
return false;
}
}
function checkEat(snake){//測試是否喫掉食物
return (direction=="up"&&snake.x==food.x&&snake.y==food.y-FW)||
(direction=="down"&&snake.x==food.x&&snake.y==food.y+FW)||
(direction=="right"&&snake.y==food.y&&snake.x==food.x+FW)||
(direction=="left"&&snake.y==food.y&&snake.x==food.x-FW);
}
var food = {
x:Math.floor(Math.random()*(WIDTH/10-1))*10,
y:Math.floor(Math.random()*(HEIGHT/10-1))*10
}
function paintFood(){
if(eat()){
food.x=Math.floor(Math.random()*(WIDTH/10-1))*10;
food.y=Math.floor(Math.random()*(HEIGHT/10-1))*10;
context.fillRect(food.x,food.y,10,10);
}else{
context.fillRect(food.x,food.y,10,10);
}
}
//測試是否撞擊到牆壁
function check_hit(snake){
if((snake[0].x==-FW)||(snake[0].x==WIDTH)||(snake[0].y==-FW)||(snake[0].y==HEIGHT)){
state=2;
console.log(snake[0].x);
}
}
//測試是否撞到自己
function hitSelf(snake){
if(snake.length>4){
if(direction=="right"){
for(var i=3;i<snake.length;i++){
if(snake[0].y==snake[i].y&&snake[0].x==snake[i].x-FW){
state=2;
}
}
}
if(direction=="left"){
for(var i=3;i<snake.length;i++){
if(snake[0].y==snake[i].y&&snake[0].x==snake[i].x+FW){
state=2;
}
}
}
if(direction=="up"){
for(var i=3;i<snake.length;i++){
if(snake[0].y==snake[i].y+FW&&snake[0].x==snake[i].x){
state=2;
}
}
}
if(direction=="down"){
for(var i=3;i<snake.length;i++){
if(snake[0].y==snake[i].y-FW&&snake[0].x==snake[i].x){
state=2;
}
}
}
}
}
//控制方向
function left(){
if(direction!=="right"){
direction="left";
}
}
function right(){
if(direction!=="left"){
direction="right";
}
}
function up(){
if(direction!=="down"){
direction="up";
}
}
function down(){
if(direction!=="up"){
direction="down";
}
}
document.onkeydown = function(e){
var e =e||window.event;
switch(e.keyCode){
case 37:
left();
break;
case 38:
up();
break;
case 39:
right();
break;
case 40:
down();
break;
}
}
setInterval(function(){
clear();
check_hit(snake);
hitSelf(snake);
paint_start();
paint_over();
paint(snake);
eat();
step(snake);
paintFood(food);
},200);
</script>
</html>自制一個貪喫蛇小遊戲
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章