[モグラたたきのゲームを実現するためのHTML+CSS + JavaScript]暇なときにプレイして、簡単にトラブルをなくしてください〜
コンテンツ
☀️☀️☀️ようこそ☀️☀️☀️
前書き
☎️こんにちは、私はバグターミネーターJavaエンジニアであるインスピレーションあふれるビッグボーイは、テクノロジーを愛し、テクノロジーの共有に取り組んでおり、暇なときにこのゲームをプレイして、簡単にトラブルをなくすことができます〜
❤️ハンサムで美しいプログラマーは、好きで、フォローして、コメントして、お気に入りに入れていると聞きました。〜❤️
レンダリング
選択されたテクノロジースタック
フロントエンドのThreeMusketeers、HTML + CSS + JavaScript開発を使用して、プロジェクトは主にJSテクノロジーを使用します
⛪JavaScriptとは何ですか？
1️⃣JavaScript（略して「JS」）は、軽量で、インタプリタされた、またはジャストインタイムでコンパイルされたプログラミング言語であり、関数が最初にあります。Webページを開発するためのスクリプト言語として有名ですが、ブラウザ以外の多くの環境でも使用されています。JavaScriptは、プロトタイププログラミング、マルチパラダイム動的スクリプト言語に基づいており、オブジェクト指向、必須、宣言、機能をサポートしています。プログラミングパラダイム。
2️⃣JavaScriptは、1995年にNetscapeのBrendanEichによってNetscapeNavigatorブラウザで最初に設計および実装されました。NetscapeはSunと連携して動作するため、Netscapeの管理者はJavaのように見せたいと考えていました。そのためJavaScriptという名前が付けられました。しかし実際には、その文法スタイルは自己とスキームに近いです。
3️⃣JavaScriptの標準は[ECMAScript]（https://baike.baidu.com/item/ECMAScript/1889420）です。2012年の時点で、すべてのブラウザーはECMAScript 5.1を完全にサポートしており、古いブラウザーは少なくともECMAScript3標準をサポートしています。2015年6月17日、ECMA InternationalはECMAScriptの第6版をリリースしました。これは、正式にはECMAScript 2015と呼ばれますが、ECMAScript6またはES2015と呼ばれることもあります。
JavaScriptは使いやすく、シンプルで、構文はJavaに似ています
JavaScriptを使用すると、開発が大幅に容易になります。JavaScriptは強力な言語です。
近年、JavaScript言語が言語のリストのトップになり、JavaScriptの力を示しています〜
ソースコード
mouse.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打地鼠</title>
<link rel="stylesheet" type="text/css" href="css/地鼠.css"/>
</head>
<body>
<div id="out">
</div>
<h1>
得分:<span id="fen_shu">0</span> 
倒计时:<input type="text" value="30" id="clock">
</h1>
</body>
<script type="text/javascript">
//获取渲染地鼠的方块
var out = document.getElementById("out");
//加载时执行此方法，渲染地图
onload = function () {
for(var i = 0; i < 20; i++){
var p = document.createElement("p");
out.appendChild(p);
}
}
var count = 0;
var fenshu = 0;
var ps = document.getElementsByTagName("p");
//随机刷新老鼠的位置
function suijilaoshu(){
var index = Math.floor(Math.random()*ps.length);
for(var i = 0; i < ps.length; i++){
ps[i].style.background = "url(img/00.jpg)";
}
ps[index].style.background = "url(img/01.jpg)";
count = index;
ps[index].className = "laoshu";
}
//定时调用
setInterval("suijilaoshu()", 1500);
var clock = document.getElementById("clock");
var fen = document.getElementById("fen_shu");
var second = 30;
var timer;
//倒计时方法，每一局游戏时长30秒
function daojishi(){
if(second != 0){
second--;
clock.value = second + "s";
} else {
clearInterval(timer);
alert("游戏结束,您的得分为:" + fenshu);
location.reload();
}
}
timer = setInterval("daojishi()", 1000);
//点中老鼠后，切换图片为老鼠被击中
onclick = function (event){
var obj = event.target;
if(obj.className == "laoshu"){
ps[count].style.background = "url(img/02.jpg)";
ps[count].className = "";
fenshu+=10;
fen.innerHTML = fenshu;
}
}
</script>
</html>
メッセージ
このゲームは小さなカジュアルゲームです。暇なときにプレイしてみませんか？