javascript游戏（课程设计：使用JavaScript制作一个网页上的贪吃蛇游戏）
本文目录
- 课程设计：使用JavaScript制作一个网页上的贪吃蛇游戏
- JavaScript怎么设计一个数独游戏
- js修改游戏数量
- 求助！用javascript写一个猜数游戏
- 用JavaScript写猜数字游戏
- 怎么用JavaScript制作一个猜拳游戏
- JavaScript利用Math随机数，实现一个猜拳小游戏，
课程设计：使用JavaScript制作一个网页上的贪吃蛇游戏
《html》
《head》
《title》贪吃蛇 Snake v2.4《/title》
《style》
body{
font-size:9pt;
}
table{
border-collapse: collapse;
border:solid #333 1px;
}
td{
height: 10px;
width: 10px;
font-size: 0px;
}
.filled{
background-color:blue;
}
《/style》
《/head》
《script》
function $(id){return document.getElementById(id);}
/**************************************************************
* javascript贪吃蛇 v2.4 《br /》
* author: sunxing007 05/14/2009《br /》
***隐藏网址***
* v2.4修正了蛇身颜色可以随着蛇前进而移动
**************************************************************/
//贪吃蛇类
var Snake = {
tbl: null,
/**
* body: 蛇身，数组放蛇的每一节，
* 数据结构{x:x0, y:y0, color:color0},
* x,y表示坐标,color表示颜色
**/
body: ,
//当前移动的方向,取值0,1,2,3, 分别表示向上,右,下,左, 按键盘方向键可以改变它
direction: 0,
//定时器
timer: null,
//速度
speed: 250,
//是否已经暂停
paused: true,
//行数
rowCount: 30,
//列数
colCount: 30,
//初始化
init: function(){
var colors = ;
this.tbl = $("main");
var x = 0;
var y = 0;
var colorIndex = 0;
//产生初始移动方向
this.direction = Math.floor(Math.random()*4);
//构造table
for(var row=0;row《this.rowCount;row++){
var tr=this.tbl.insertRow(-1);
for(var col=0;col《this.colCount;col++) {
var td=tr.insertCell(-1);
}
}
//产生20个松散节点
for(var i=0; i《10; i++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows;
}
}
//产生蛇头
while(true){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
if(!this.isCellFilled(x,y)){
this.tbl.rows.style.backgroundColor = "black";
this.body.push({x:x,y:y,color:’black’});
break;
}
}
this.paused = true;
//添加键盘事件
document.onkeydown= function(e){
if (!e)e=window.event;
switch(e.keyCode | e.which | e.charCode){
case 13: {
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
//如果没有暂停，则停止移动
Snake.pause();
Snake.paused = true;
}
break;
}
case 37:{//left
//阻止蛇倒退走
if(Snake.direction==1){
break;
}
Snake.direction = 3;
break;
}
case 38:{//up
//快捷键在这里起作用
if(event.ctrlKey){
Snake.speedUp(-20);
break;
}
if(Snake.direction==2){//阻止蛇倒退走
break;
}
Snake.direction = 0;
break;
}
case 39:{//right
if(Snake.direction==3){//阻止蛇倒退走
break;
}
Snake.direction = 1;
break;
}
case 40:{//down
if(event.ctrlKey){
Snake.speedUp(20);
break;
}
if(Snake.direction==0){//阻止蛇倒退走
break;
}
Snake.direction = 2;
break;
}
}
}
},
//移动
move: function(){
this.timer = setInterval(function(){
Snake.erase();
Snake.moveOneStep();
Snake.paint();
}, this.speed);
},
//移动一节身体
moveOneStep: function(){
if(this.checkNextStep()==-1){
clearInterval(this.timer);
alert("Game over!\nPress Restart to continue.");
return;
}
if(this.checkNextStep()==1){
var _point = this.getNextPos();
var _x = _point.x;
var _y = _point.y;
var _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//因为吃了一个食物，所以再产生一个食物
this.generateDood();
return;
}
//window.status = this.toString();
var point = this.getNextPos();
//保留第一节的颜色
var color = this.body.color;
//颜色向前移动
for(var i=0; i《this.body.length-1; i++){
this.body.color;
}
//蛇尾减一节， 蛇尾加一节，呈现蛇前进的效果
this.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
//探寻下一步将走到什么地方
pause: function(){
clearInterval(Snake.timer);
this.paint();
},
getNextPos: function(){
var x = this.body.x;
var y = this.body.y;
var color = this.body.color;
//向上
if(this.direction==0){
y--;
}
//向右
else if(this.direction==1){
x++;
}
//向下
else if(this.direction==2){
y++;
}
//向左
else{
x--;
}
//返回一个坐标
return {x:x,y:y};
},
//检查将要移动到的下一步是什么
checkNextStep: function(){
var point = this.getNextPos();
var x = point.x;
var y = point.y;
if(x《0||x》=this.colCount||y《0||y》=this.rowCount){
return -1;//触边界，游戏结束
}
for(var i=0; i《this.body.length; i++){
if(this.body.y==y){
return -1;//碰到自己的身体,游戏结束
}
}
if(this.isCellFilled(x,y)){
return 1;//有东西
}
return 0;//空地
},
//擦除蛇身
erase: function(){
for(var i=0; i《this.body.length; i++){
this.eraseDot(this.body.y);
}
},
//绘制蛇身
paint: function(){
for(var i=0; i《this.body.length; i++){
this.paintDot(this.body.color);
}
},
//擦除一节
eraseDot: function(x,y){
this.tbl.rows.style.backgroundColor = "";
},
paintDot: function(x,y,color){
this.tbl.rows.style.backgroundColor = color;
},
//得到一个坐标上的颜色
getColor: function(x,y){
return this.tbl.rows.style.backgroundColor;
},
//用于调试
toString: function(){
var str = "";
for(var i=0; i《this.body.length; i++){
str += "x:" + this.body.color + " - ";
}
return str;
},
//检查一个坐标点有没有被填充
isCellFilled: function(x,y){
if(this.tbl.rows.style.backgroundColor == ""){
return false;
}
return true;
},
//重新开始
restart: function(){
if(this.timer){
clearInterval(this.timer);
}
for(var i=0; i《this.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = ;
this.init();
this.speed = 250;
},
//加速
speedUp: function(time){
if(!this.paused){
if(this.speed+time《10||this.speed+time》2000){
return;
}
this.speed +=time;
this.pause();
this.move();
}
},
//产生食物。
generateDood: function(){
var colors = ;
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows;
}
}
};
《/script》
《body onload="Snake.init();"》
/*************************************************************《br /》
* javascript贪吃蛇 v2.4《br /》
* author: sunxing007 05/14/2009《br /》
***隐藏网址***
**************************************************************/《br /》
《table id="main" border="1" cellspacing="0" cellpadding="0"》《/table》
《input type="button" id="btn" value="开始/暂停" /》点左边按钮或按Enter开始/暂停游戏《br /》
《input type="button" id="reset" value="重新开始" /》《br /》
《input type="button" id="upSpeed" value="加速" /》点左边按钮或按Ctrl + ↑加速《br /》
《input type="button" id="downSpeed" value="减速" /》点左边按钮或按Ctrl + ↓减速
《script》
$(’btn’).onclick = function(){
if(Snake.paused){
Snake.move();
Snake.paused = false;
}
else{
Snake.pause();
Snake.paused = true;
}
};
$("reset").onclick = function(){
Snake.restart();
this.blur();
};
$("upSpeed").onclick = function(){
Snake.speedUp(-20);
};
$("downSpeed").onclick = function(){
Snake.speedUp(20);
};
《/script》
《/body》
《/html》
JavaScript怎么设计一个数独游戏
createSdArr:function(){
//生成数独数组。
var that = this;
try{
this.sdArr = ;
this.setThird(2,2);
this.setThird(5,5);
this.setThird(8,8);
var allNum = ;
outerfor:
for(var i=1;i《=9;i++){
innerfor:
for(var j=1;j《=9;j++){
if(this.sdArr){
continue innerfor;
}
var XArr = this.getXArr(j,this.sdArr);
var YArr = this.getYArr(i,this.sdArr);
var thArr = this.getThArr(i,j,this.sdArr);
var arr = getConnect(getConnect(XArr,YArr),thArr);
var ableArr = arrMinus(allNum,arr);
if(ableArr.length == 0){
this.createSdArr();
return;
break outerfor;
}
var item;
//如果生成的重复了就重新生成。
do{
item = ableArr;
}while(($.inArray(item, arr)》-1));
this.sdArr = item;
}
}
this.backupSdArr = this.sdArr.slice();
}catch(e){
//如果因为超出浏览器的栈限制出错，就重新运行。
that.createSdArr();
}
},
getXArr:function(j,sdArr){
//获取所在行的值。
var arr = ;
for(var a =1;a《=9;a++){
if(this.sdArr){
arr.push(sdArr)
}
}
return arr;
},
getYArr:function(i,sdArr){
//获取所在列的值。
var arr = ;
for(var a =1;a《=9;a++){
if(sdArr){
arr.push(sdArr)
}
}
return arr;
},
getThArr:function(i,j,sdArr){
//获取所在三宫格的值。
var arr = ;
var cenNum = this.getTh(i,j);
var thIndexArr = ;
for(var a =0;a《9;a++){
if(sdArr){
arr.push(sdArr);
}
}
return arr;
},
getTh:function(i,j){
//获取所在三宫格的中间位坐标。
var cenArr = ;
var index = (Math.ceil(j/3)-1) * 3 +Math.ceil(i/3) -1;
var cenNum = cenArr;
return cenNum;
},
setThird:function(i,j){
//为对角线上的三个三宫格随机生成。
var numArr = ;
var sortedNumArr= numArr.sort(function(){return Math.random()-0.5》0?-1:1});
var cenNum = parseInt(i+’’+j);
var thIndexArr = ;
for(var a=0;a《9;a++){
this.sdArr;
}
}
js修改游戏数量
无法修改。js是修改数据的软件，是无法修改游戏内的数量的，JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。
求助！用javascript写一个猜数游戏
function CaiNumber(){
//定义需要被猜的数字(100以内的数字)
var number = parseInt(Math.random() * 100);
//定义猜的参数,每猜一次，加个1
var count = 0;
console.log(’猜数字游戏开始’);
console.log(’在控制台输入:cai(数字),来查看是否才对’);
console.log(’在控制台输入:cai("开始"),来重新开始游戏’);
console.log(’在控制台输入:cai("结束"),来结束游戏’);
window.cai = function(_number){
if(_number == ’开始’){
console.log(’游戏重新开始啦’);
CaiNumber();
return false;
}
if(_number == ’结束’){
count = -1;
console.log(’很可惜,你没能够坚持下来,游戏结束’);
return false;
}
if(count == -1){
console.log(’游戏已经结束啦,控制台输入 cai("开始")可以重新开始游戏 ’);
return false;
}
count += 1;
if(_number == undefined){
console.log(’你还没有输入要猜的数字哦’);
}else if(isNaN(_number)){
console.log(’你输入的不是数字哦’);
}else{
if(_number 《 number ){
console.log(’你猜的数字太小啦’);
}else if(_number 》 number){
console.log(’你猜的数字太大啦’);
}else if(_number == number){
console.log(’恭喜你,猜了’+count+’次终于猜对了’);
console.log(’在控制台输入:cai("开始"),可以继续游戏’);
count = -1;
}
}
}
}
CaiNumber();
用JavaScript写猜数字游戏
document.write("《input type=’text’ id=’inval’ name=’inval’/》"); //数字框
document.write("《input type=’button’ onclick=’Guess();’ value=’提交’》"); //按钮
function Guess() {
var inputVal=document.getElementById("inval").value; //获取文本框的值
var curRand=parseInt(100*Math.random()); //获取随机数
if(!isNum(inputVal))
{
alert("不是数字，请重新输入");
return;
}
if(inputVal){
if(inputVal》curRand){
alert("胜利");
} else if (inputVal《curRand){
alert("输了");
} else {
alert("平局");
}
}
}
//判断是否是数字，true表示是数字
function isNum(value) {
return !isNaN(value);
}
怎么用JavaScript制作一个猜拳游戏
《!DOCTYPE html》
《html》
《head》
《style type="text/css"》
#main{
text-align:center;
margin-left:25%;
width:50%;
border:1px solid black;
}
#player,#result,#cpu{
height:100%;
float:left;
}
#player{
background:#dde;
}
#cpu{
background:#ecc;
}
#player,#cpu{
width:25%;
}
#result{
width:50%;
}
#viewBox{
width:80%;
height:45%;
}
#choiceBox .item{
float:left;
width:33.33%;
height:100%;
line-height:100%;
background:#bbe;
cursor:pointer;
}
#choiceBox{
height:25%;
width:60%;
margin-left:20%;
}
《/style》
《/head》
《body》
《div id="main"》
《div id="viewBox"》
《div id="player"》玩家《/div》
《div id="result"》《/div》
《div id="cpu"》电脑《/div》
《/div》
《div id="choiceBox"》
《span class="item"》剪刀《/span》
《span class="item"》石头《/span》
《span class="item"》布《/span》
《/div》
《/div》
《script type="text/javascript"》
var _main = document.getElementById("main");
var _viewBox = document.getElementById("viewBox");
var _choiceBox = document.getElementById("choiceBox");
var _player = document.getElementById("player");
var _result = document.getElementById("result");
var _cpu = document.getElementById("cpu");
_choiceBox.childNodes.onmouseover =
_choiceBox.childNodes.onmouseover =
_choiceBox.childNodes = "#aae"};
_choiceBox.childNodes.onmouseout =
_choiceBox.childNodes.onmouseout =
_choiceBox.childNodes = "#bbe"};
function resize(){
var width = window.innerWidth;
var height = window.innerHeight;
var smaller = width 》 height ? height : width;
_main.style = height * 0.5 + "px";
_main.style = height * 0.2 + "px";
_main.style = smaller * 0.08 + "px";
_player.style = height * 0.225 + "px";
_result.style = height * 0.225 + "px";
_cpu.style = height * 0.225 + "px";
_viewBox.style = height * 0.05 + "px " + width * 0.05 + "px";
_choiceBox.childNodes = height * 0.125 + "px";
_choiceBox.childNodes = height * 0.125 + "px";
_choiceBox.childNodes = height * 0.125 + "px";
_choiceBox.style = smaller * 0.04 + "px";
};
resize();
window.onresize = resize;
//以下是猜拳逻辑部分
var choiceItems = ;
choiceItems;
choiceItems;
choiceItems;
choiceItems;
choiceItems;
choiceItems;
_choiceBox.childNodes);};
_choiceBox.childNodes);};
_choiceBox.childNodes);};
function cal(player_choice){
var cpu_choice = choiceItems;
_player.innerHTML = player_choice;
_cpu.innerHTML = cpu_choice;
if(cpu_choice == player_choice){
_result.innerHTML = "-";
}else if(cpu_choice == player_choice){
_result.innerHTML = "win";
}else if(cpu_choice == player_choice){
_result.innerHTML = "loss";
}
}
《/script》
《/body》
《/html》
JavaScript利用Math随机数，实现一个猜拳小游戏，
请输入你的出拳数字《input /》《br /》
《button》比赛《/button》
《div》《/div》
《script》
window.onload=function(){
document.querySelector("button").onclick=function(){
var m=document.querySelector("div");
var x1=Number(document.querySelector("input").value);
if(x1《1||x1》3){
m.innerHTML="你输入的数字有误，只能是1、2、3";
}else{
var x2=Math.floor(Math.random()*3)+1;
m.innerHTML="结果：";
if(x1==x2){
m.innerHTML+="打平了";
}else if((x2-x1)==1||(x1-x2)==2){
m.innerHTML+="你赢了";
}else{
m.innerHTML+="你输了";
}
m.innerHTML+="《br /》你出拳："+x1+"《br /》电脑出拳："+x2;
}
}
}
《/script》
更多文章：
2026年10月15日 14:10
2026年10月15日 11:50
2026年10月15日 10:50
知名女星孙侨璐于跨年夜，心梗猝死，年仅25岁！一一一写给年轻人？1月2日演员孙侨潞离世，说好的来日方长转眼就是别离
2026年10月15日 10:40
2026年10月15日 07:50
2026年10月15日 06:30
2026年10月15日 06:00
avantage怎么设置为中文（Avantage安装丢失GIT）
2026年10月15日 03:00
2026年10月15日 02:40
2026年10月15日 02:10
