Click here for free DL of the app version that can save data.

No:718

369

←

Prev Next

→

Display an infinite number of sub-windows
Developer User3104｜Date and time 23/6/17 14:25:54
Build time 25.148 sec｜Game capacity 2.233KB｜

Script

The sample code shown here is、A simple card game is implemented for operation on a smartphone.

card game

In this game.、Prepare all the playing cards in the initial state.、Each time a button is clicked, a card is drawn at random and、The cards drawn are displayed. Each time a card is drawn, the corresponding card is removed from the deck of playing cards, so、You can continue until you run out of cards. Since the design only has cards and buttons、Its simple.、Easy to view on a mobile phone、We make it easy to operate.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

こちらに示すサンプルコードは、スマホでの操作を前提としたシンプルなカードゲームを実装しています。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>カードゲーム</title>
	<style>
		body{
			background-color: #f4f4f4;
			font-family: Arial, sans-serif;
			text-align: center;
		}
		.card{
			width: 100px;
			height: 150px;
			border: solid 2px #000;
			border-radius: 10px;
			display: inline-flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 10px;
			font-size: 3em;
		}
		.btn{
			background-color: #005eff;
			color: #fff;
			padding: 10px 20px;
			border: none;
			border-radius: 5px;
			font-size: 1.5em;
			cursor: pointer;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<h1>カードゲーム</h1>
	<div id="cards"></div>
	<button class="btn" onclick="newCard()">カードを引く</button>

このゲームでは、初期状態で全てのトランプカードを用意しておき、ボタンをクリックするたびにランダムに1枚カードが引かれ、引かれたカードが表示されます。カードが引かれるたびにトランプカードの山から対応するカードが削除されるので、カードがなくなるまで続けることができます。

デザインはカードとボタンしかないため、シンプルですが、スマホでも見やすく、操作しやすいようにしています。