Después de reanudar el trabajo años después, escribí un juego de cuadrícula para practicar las habilidades manuales.
El nombre del juego en el que pensé por primera vez fue Snowman Going Home. No pude encontrar una cabeza de muñeco de nieve adecuada, así que simplemente lo llamé juego de cuadrícula, jaja.
Dirección del proyecto (abierto para jugar)
http://mumuqiuer.gitee.io/snowman/
Actualmente no existe una versión móvil y solo se puede jugar en PC.
instrucciones del juego:
Usa los cuatro botones de flecha hacia arriba, abajo, izquierda y derecha en el teclado para mover a la niña y llegar a la posición de la casita antes del final de la cuenta regresiva, es decir, el desafío del juego es exitoso.
Cada vez que está restringido a moverse un cuadrado, los cuadrados rojo y verde representan los puntos positivos y negativos, y los cuadrados por los que pasa ya no recibirán puntos.
Cuenta atrás, el sistema establece el tiempo en 30 segundos, puedes modificar el tiempo tú mismo para ajustar la dificultad del juego.
El juego es más que la puntuación en un tiempo limitado. Eso sí, si el tiempo de juego ha terminado y no has vuelto a casa, son 0 puntos. Jaja.
La función de repetición del juego, el tablero permanece sin cambios, puedes repetirlo. ¡Registra la puntuación de cada repetición, ven y compite con tus amigos!
Si ya no quieres jugar a este juego, puedes jugar a otro juego y el tablero se regenerará con puntuaciones aleatorias para cada cuadrícula.
Ideas de realización de juegos
Implementación de h5 + vue + js
El principio de movimiento es el desplazamiento de posición de css translate (x, y)
dificultad
1. Obtenga la puntuación de la cuadrícula objetivo alcanzada por el movimiento actual.
Inicialice una matriz de diccionario de cuadrícula. Cuando se crea el tablero, la puntuación cuadrada correspondiente registrada en el diccionario se actualiza sincrónicamente. Cada vez que se mueve el desplazamiento acumulado, se recorre la matriz del diccionario y se determina el cuadrado objetivo comparando el desplazamiento, obteniendo así la puntuación del cuadrado objetivo.
2. Revisión del juego.
Asegúrese de que la puntuación que se muestra en el cuadrado permanezca sin cambios, y el cuadrado por el que pasó y que estableció en 0 debe restaurarse. En la matriz del tablero de ajedrez, registre dos puntuaciones, una es la puntuación de la cuadrícula aleatoria y la otra es la puntuación modificada usedScore. La puntuación es siempre la misma en un juego, el valor de usedScore cambia dinámicamente y la puntuación es 0 después de que el registro falla. En la pantalla del tablero de ajedrez, usedScore se muestra si usedScore es 0; de lo contrario, se muestra la puntuación.
Compartir código fuente del juego
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>方格游戏</title>
<link rel="shortcut icon" href="favicon.ico">
<meta name="keywords" content="方格游戏">
<meta name="description" content="方格游戏">
<script src="vue.js"></script>
<style>
body{
width: 100%;
height:100%;
margin:0;
background: #fff;
overflow: hidden;
box-sizing: border-box;
}
div.container{
width: 100%;
display: flex;
justify-content: center;
margin-top:80px;
text-align: center;
}
div.container div.chess{
width:700px;
height:700px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
margin:0 20px;
}
div.container div.score{
width:300px;
margin:0 20px;
border:1px solid #999;
background: #999;
}
/*游戏计时器*/
div.head{
width:100%;
height:64px;
box-sizing: border-box;
text-align: center;
position: fixed;
top: 0;
background: #999;
padding:12px;
}
div.head span,div.score span{
font-size: 24px;
font-weight: bold;
color:red;
padding:0 4px
}
/*雪人*/
div.snowman{
width:80px;
height:80px;
margin:10px;
text-align: center;
background: url("head.jpg") no-repeat;
cursor: pointer;
z-index: 2;
}
div.chess-grid{
width:100px;
height:100px;
line-height:100px;
box-sizing: border-box;
text-align: center;
border:1px solid #ccc;
color: #fff;
}
/*雪人的家*/
div.home{
width:100px;
height:80px;
margin:12px 7px;
background: url("home.jpg") no-repeat;
}
/*控制器*/
div.control{
width:100%;
height:60px;
line-height:60px;
text-align: center;
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
background: #999;
}
div.btn{
width:200px;
height:40px;
line-height: 40px;
box-sizing: border-box;
border:1px solid #ccc;
margin:10px;
color: #fff;
cursor: pointer;
}
div.auto{
background: green;
}
div.refresh{
background: red;
}
div.game_start_btn{
margin:0 auto;
}
</style>
</head>
<body>
<div id="root">
<div class="head" v-show="!showControl">
<div v-show="!showTime" class="game_start_btn btn" @click="game_start">开始游戏</div>
<div v-show="showTime">倒计时<span>{
{gameTime}}</span>秒 </div>
</div>
<div class="container">
<div class="chess">
<div class="chess-grid"><div class="snowman" :style="moveStyle" title="按键盘方向键移动我哦"></div></div>
<div class="chess-grid" v-for="(item,index) in chess" :key="index" :style="{background:item.background}">{
{item.usedScore == 0 ? item.usedScore : item.score}}分</div>
<div class="chess-grid"><div class="home"></div></div>
</div>
<div class="score">
<p>倒计时设置(10 ~ 60s)：<input type="number" v-model="userSetGameTime" min="10" max="60"/></p>
<hr>
<p>战绩</p>
<div v-for="(score,index) in gameScores" :key="index">第{
{index+1}}战得分<span>{
{score}}</span>分</div>
</div>
</div>
<div class="control" v-show="showControl">
<div class="btn auto" @click="game_review">本局复盘</div>
<div class="btn refresh" @click="game_update">再来一局</div>
</div>
</div>
<script>
new Vue({
el: "#root",
data: {
showControl:false,//是否显示本局复盘、再来一局
showTime:false,//是否显示倒计时 不显示倒计时的时候会显示开始游戏按钮
is_get_home:false,
gameTime:30,//系统设置的游戏时间 30秒一局游戏
userSetGameTime:30,//用户设置的游戏时间
gameScores:[],//单机多人游戏 游戏复盘，存储历史得分
currentScore:0,//当前一局游戏的得分
moveDown:0,
moveRitht:0,
chess:[],//存储随机的分数和背景色数组
moveStyle:{transform:"translate(0,0)"},//偏移样式
dictionary:[//棋盘各块偏移量对照字典 最后一格为终点格
{"score":0," i":0, "r":100, "d":0},
{"score":0, "i":1, "r":200, "d":0},
{"score":0,"i":2, "r":300, "d":0},
{"score":0,"i":3, "r":400, "d":0},
{"score":0,"i":4, "r":500, "d":0},
{"score":0,"i":5, "r":600, "d":0},
{"score":0,"i":6, "r":0, "d":100},
{"score":0,"i":7, "r":100, "d":100},
{"score":0,"i":8, "r":200, "d":100},
{"score":0,"i":9, "r":300, "d":100},
{"score":0,"i":10, "r":400, "d":100},
{"score":0,"i":11, "r":500, "d":100},
{"score":0,"i":12, "r":600, "d":100},
{"score":0,"i":13, "r":0, "d":200},
{"score":0,"i":14, "r":100, "d":200},
{"score":0,"i":15, "r":200, "d":200},
{"score":0,"i":16, "r":300, "d":200},
{"score":0,"i":17, "r":400, "d":200},
{"score":0,"i":18, "r":500, "d":200},
{"score":0,"i":19, "r":600, "d":200},
{"score":0,"i":20, "r":0, "d":300},
{"score":0,"i":21, "r":100, "d":300},
{"score":0,"i":22, "r":200, "d":300},
{"score":0,"i":23, "r":300, "d":300},
{"score":0,"i":24, "r":400, "d":300},
{"score":0,"i":25, "r":500, "d":300},
{"score":0,"i":26, "r":600, "d":300},
{"score":0,"i":27, "r":0, "d":400},
{"score":0,"i":28, "r":100, "d":400},
{"score":0,"i":29, "r":200, "d":400},
{"score":0,"i":30, "r":300, "d":400},
{"score":0,"i":31, "r":400, "d":400},
{"score":0,"i":32, "r":500, "d":400},
{"score":0,"i":33, "r":600, "d":400},
{"score":0,"i":34, "r":0, "d":500},
{"score":0,"i":35, "r":100, "d":500},
{"score":0,"i":36, "r":200, "d":500},
{"score":0,"i":37, "r":300, "d":500},
{"score":0,"i":38, "r":400, "d":500},
{"score":0,"i":39, "r":500, "d":500},
{"score":0,"i":40, "r":600, "d":500},
{"score":0,"i":41, "r":0, "d":600},
{"score":0,"i":42, "r":100, "d":600},
{"score":0,"i":43, "r":200, "d":600},
{"score":0,"i":44, "r":300, "d":600},
{"score":0,"i":45, "r":400, "d":600},
{"score":0,"i":46, "r":500, "d":600},
{"score":0,"i":47, "r":600, "d":600}
]
},
methods: {
//生成随机分数棋格
createChess:function(){
//7*7方格，掐头去尾，需要生成47个随机数。
var score;
var bgColor;
for(var i=0;i<47;i++){
// 按奇数偶数对应正负分值
if(i%2 ==0){
//正数 加分
score =Math.round(Math.random()*10)+2;
bgColor="#16a05d";
}else{
//负数 减分
score =-Math.round(Math.random()*6)-1;
bgColor="#e21918";
}
this.chess.push({
"score":score,
"usedScore":100,//随便指定一个现今规则不可能有的一个分数即可
"background":bgColor
});
//同步更新对照字典，存储分值。
this.dictionary[i].score = score;
}
},
//键盘事件 四个箭头按键，控制上下左右四个方向的移动。
letMove:function(e){
e||event;
//当游戏倒计时显示时，即游戏还未结束，才能触发键盘事件，开始移动。
if(this.showTime){
switch(e.keyCode){
case 39:
//向右移动
this.moveRitht +=100;
break;
case 40:
//向下移动
this.moveDown +=100;
break;
case 37:
//向左移动
this.moveRitht -=100;
break;
case 38:
//向上移动
this.moveDown -=100;
break;
default:
return;
}
//判断界限值 不能超出棋盘活动
this.moveRitht < 0 ? this.moveRitht = 0 : this.moveRitht;
this.moveRitht > 600 ? this.moveRitht = 600 : this.moveRitht;
this.moveDown < 0 ? this.moveDown = 0 : this.moveDown;
this.moveDown > 600 ? this.moveDown = 600 : this.moveDown;
this.moveStyle.transform = "translate("+this.moveRitht+"px,"+this.moveDown+"px)";
//根据偏移的位置，统计得分。
this.countScore(this.moveRitht,this.moveDown);
}
},
//计算得分
countScore:function(r,d){
//遍历偏移量字典，根据当前所在的位置，获取对应的分值。
//偏移量字典（len=48）比棋格(len=47)多了一个终点的位置信息。
if(!(r == 600 && d == 600)){
//不在家，赋值false 防止回家后再离开的情形
this.is_get_home = false;
for(var i=0;i<48;i++){
if(r == this.dictionary[i].r && d == this.dictionary[i].d){
if(this.chess[i].usedScore !=0){
this.currentScore += this.dictionary[i].score;
//分数一次性有效 走过的分数变为0.
//为了复盘，不直接改变分数，新分数存储到 usedScore
this.chess[i].usedScore = 0;
}
}
}
}else{
//雪人到家
this.is_get_home = true;
}
},
//计时器，每次时间-1，时间单位秒。
timer:function(){
this.gameTime -= 1
},
//用户点击游戏开始 创建定时器 显示倒计时
game_start:function(){
if(this.gameTime != this.userSetGameTime){
//系统设置的游戏时长和用户设置的游戏时长冲突，则使用用户设置的时长
this.gameTime = this.userSetGameTime;
}
this.showTime=true;
timer1=setInterval(this.timer, 1000);
},
game_review:function(){
this.parameter_reset();
this.resetUsedScore();
},
//恢复棋盘 使用过的分数初始化
resetUsedScore:function(){
var len = 47;
while(len--){
this.chess[len].usedScore = 100;
}
},
//本局重玩，只需要重置参数。
parameter_reset:function(){
this.showControl=false;
this.is_get_home = false;
this.showTime=false;//先不显示倒计时，显示开始游戏按钮。
this.moveRitht=0;
this.moveDown=0;
this.moveStyle.transform = "translate(0,0)";
this.currentScore=0;
},
//页面初始化 游戏重新开始
game_update:function(){
this.parameter_reset();
this.gameScores=[];
this.chess=[];
this.createChess();
}
},
watch:{
//监测游戏时间
gameTime(){
if(this.gameTime == 0){
clearInterval(timer1);
this.showControl=true;
this.showTime=false;//倒计时结束，关闭倒计时结果显示
if(this.is_get_home){
//游戏结束：倒计时结束,雪人进入小屋。当前得分计入。
this.gameScores.push(this.currentScore);
}else{
//游戏失败： 倒计时结束，但雪人未进入小屋。本局得分为0。
this.currentScore=0;
this.gameScores.push(0);
}
}
}
},
created(){
//注册键盘事件
var _this = this;
document.addEventListener("keydown", _this.letMove);
},
mounted(){
this.game_update();
}
})
</script>
</body>
</html>